<template>
  <div class="app-pro-basicLayout-content-wrap">
    <div class="app-pro-pages-content">
      <div class="app-pro-table-search">
        <el-form :inline="true" :model="formInline" ref="formInline" label-width="80px" size="small" class="form-flex-item">
          <el-row :gutter="20">
            <el-col :xs="12" :sm="10" :md="8" :lg="6">
              <el-form-item :label="'유형'| language()" prop="type">
                <el-select v-model="formInline.type" :placeholder="'종류를 선택하십시오.'|language()">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6">
              <el-form-item>
                <el-button type="primary" size="small" @click="handleSearch">{{'검색'| language}}</el-button>
                <el-button size="small" @click="resetForm('formInline')">{{'초기화'| language}}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="app-pro-pages-table">
        <div class="main-card">
          <div class="main-table-toolbar">
            <div class="main-table-toolbar-title">
              <div class="main-table-toolbar-title-only">광고 위치 관리</div>
            </div>
            <div class="main-table-toolbar-option">
              <el-button type="primary" size="mini" icon="el-icon-plus" style="margin-right:5px" @click="confirmAddAdvert">추가</el-button>
              <el-link :underline="false" class="main-table-toolbar-item-icon">
                <el-tooltip class="item" effect="dark" content="다운로드" placement="top">
                  <i @click="downloadFile('/api/setting/advert/index', '광고 위치 관리')" class="el-icon-download"></i>
                </el-tooltip>
              </el-link>
              <!-- <el-link :underline="false" class="main-table-toolbar-item-icon">
                <el-tooltip class="item" effect="dark" content="초기화" placement="top">
                  <i @click="getAdvertList()" class="el-icon-refresh-right"></i>
                </el-tooltip>
              </el-link> -->
            </div>
          </div>
          <div class="main-table-wrapper" style="padding: 0">
            <my-table
              :columns="columns"
              :data="data"
              :loading="loading"
              :pagination="pagination"
              :showIndex="true"
              :showSelection="true"
              :cellStyle="{padding: '6px 0'}"
              :headerCellStyle="{background:'rgba(247, 133, 2, 1)',color:'#fff'}"
              @emitSelection="emitSelection"
              @currentChange="currentChange">
              <template v-slot:image="slotProps">
                <el-image
                  v-if="slotProps.callback.row.has_one_image"
                  style="width: 100px; height: 100px"
                  :src="slotProps.callback.row.has_one_image ? slotProps.callback.row.has_one_image.url : ''"
                  fit="contain"></el-image>
              </template>
              <template v-slot:operation="slotProps">
                <el-button
                  @click.native.prevent="handleEdit(slotProps.callback.row)"
                  type="text">
                  수정
                </el-button>
                <!-- <el-divider direction="vertical"></el-divider> -->
                <!-- <el-popconfirm
                  title="삭제하시겠습니까"
                  @onConfirm="handleDeleteAdvert(slotProps.callback.row.id)"
                  :confirmButtonText="'확인'|language"
                  :cancelButtonText="'취소'|language"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    style="padding-left:15px;color:#f56c6c">
                    삭제
                  </el-button>
                </el-popconfirm> -->
              </template>
            </my-table>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :title="dialogForm.title"
      custom-class="dialog-content"
      :visible.sync="dialogForm.dialogVisible"
      :destroy-on-close="true"
      top="5%"
      width="550px">
      <div class="dialog-body-content">
        <form-page
          :ref-obj.sync="formInfo.ref"
          :data="formInfo.data"
          :field-list="formInfo.fieldList"
          :rules="formInfo.rules"
          :label-width="formInfo.labelWidth"
          :list-type-info="listTypeInfo">
          <template v-slot:form-item-image >
            <Upload :limit='1' ></Upload>
          </template>
        </form-page>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogForm.dialogVisible = false">취소</el-button>
        <el-button size="small" type="primary" @click="handleSubmitAdvert">확인</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { publicEvents } from '@/mixins'
import { mergeObjOfValue, deepClone } from '@/utils'
import FormPage from '_c/FormPage'
import myTable from '_c/Table'
import Upload from '_c/Upload'
import * as advertApi from '@/api/webinfo/advert'
const formInfoData = {
  id: '',
  image: '',
  type: '',
  name: '',
  url: '',
  sort: 1
}
export default {
  name: 'webinfo-advert',
  data () {
    return {
      formInline: {
        type: ''
      },
      options: [{
        label: 'index_banner',
        value: 'index_banner'
      }],
      columns: [{
        label: '유형',
        prop: 'type',
        width: 120
      }, {
        label: '이름',
        prop: 'name'
      }, {
        label: '링크',
        prop: 'url'
      }, {
        label: '이미지',
        prop: '',
        slot: 'image'
      }, {
        label: '정렬',
        prop: 'sort'
      }, {
        label: '관리',
        prop: '',
        width: 160,
        align: 'left',
        slot: 'operation'
      }],
      data: [],
      pagination: {
        currentPage: 1,
        pageSize: 15
      },
      selectionData: [],
      loading: true,
      dialogForm: {
        dialogVisible: false,
        title: '추가'
      },
      listTypeInfo: {
        type: []
      },
      formInfo: {
        ref: null,
        data: formInfoData,
        fieldList: [
          { label: '이름', value: 'name', type: 'input', className: 'el-form-block', required: true },
          { label: '이미지', value: 'image', slot: true, className: 'el-form-block', required: true },
          { label: '링크', value: 'url', type: 'input', className: 'el-form-block' },
          { label: '유형', value: 'type', type: 'select', className: 'el-form-block', list: 'type' },
          { label: '정렬', value: 'sort', type: 'inputNumber', className: 'el-form-block' }
        ],
        rules: {},
        labelWidth: '80px'
      }
    }
  },
  mixins: [publicEvents],
  components: {
    myTable,
    FormPage,
    Upload
  },
  mounted () {
    this.formInfo.data = deepClone(formInfoData)
    this.getAdvertList()
    this.initRules()
  },
  methods: {
    initRules () {
      const formInfo = this.formInfo
      formInfo.rules = this.$initRules(formInfo.fieldList)
    },
    getAdvertList () {
      const data = {
        ...this.formInline,
        page: this.pagination.currentPage,
        per: this.pagination.pageSize
      }
      this.loading = true
      advertApi.getAdvertList(data).then(res => {
        this.loading = false
        this.data = res.data
        this.pagination.total = res.meta.pagination.total
      })
    },
    handleDeleteAdvert (id) {
      advertApi.deleteAdvert({ id }).then(res => {
        this.getAdvertList()
      })
    },
    confirmAddAdvert () {
      this.dialogForm.title = '추가'
      mergeObjOfValue(this.formInfo.data, formInfoData)
      this.dialogForm.dialogVisible = true
    },
    handleSubmitAdvert () {
      if (this.formInfo.data.id) {
        advertApi.saveAdvert(this.formInfo.data).then(res => {
          this.$message({
            message: '반영이 완료되었습니다.',
            type: 'success'
          })
        })
      } else {
        advertApi.saveAdvert(this.formInfo.data).then(res => {
          this.$message({
            message: '반영이 완료되었습니다.',
            type: 'success'
          })
        })
      }
    },
    handleEdit (rowData) {
      this.dialogForm.title = '수정'
      this.formInfo.data.id = rowData.id
      mergeObjOfValue(this.formInfo.data, rowData)
      this.dialogForm.dialogVisible = true
    },
    handleSearch () {
      this.pagination.currentPage = 1
      this.getAdvertList()
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.getAdvertList()
    },
    emitSelection (val) {
      this.selectionData = val
    },
    currentChange (val) {
      this.pagination.currentPage = val
      this.getAdvertList()
    }
  }
}
</script>
